<template>
  <view>
    <u-popup :show="visible" @close="hidePicker" mode="bottom" :round="10" >
      <view class="picker" :style="{paddingBottom: (keyboardHeight+10)+'px'}">
        <view class="picker-header">
          <view class="title">
            {{ title }}
          </view>
          <view class="topsearch">
            <!-- <text class="info" @click="hidePicker">取消</text> -->
			<view class="search-input" v-if="type!=0">
				<input
				  type="text"
				  @input="searchChange"
				  v-model="searchQuery"
				  :adjust-position="false"
				  :auto-blur="true"
				  placeholder="请输入关键字搜索"
				  autoBlur
				  @focus="onFocus"
				  @blur="keyboardHeight=0"
				/>
			</view>
            <!-- <text class="primary" @click="selectItem">确定</text> -->
          </view>
        </view>
		<view v-if="visible">
			<picker-view class="picker-view" @change="bindChange" :value="pickerValue" v-if="type !=3">
			  <picker-view-column>
				<view
				  class="item" style="text-align: center;"
				  v-for="(item, index) in type == 1 ? items : filteredItems"
				  :key="index"
				  >{{ item.text }}</view
				>
			  </picker-view-column>
			</picker-view>
			<view style="height: 70px;" v-if="type ==3"></view>
		</view>
		<view style="display: flex;justify-content: center;padding: 50rpx 0 env(safe-area-inset-bottom) 0;">
			<view class="picker-btn">
				<view class="btn" @click="hidePicker">取消</view>
				<view class="btn on" @click="selectItem">确定</view>
			</view>
		</view>
	  </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    items: Array, // 选择器的选项
    title: String, //title
    type: Number, //type 0不显示搜索/1后台模糊/2前端模糊
	  mobile: String ,//1为手机端
  },
  data() {
    return {
      visible: false, // 是否显示选择器
      searchQuery: "", // 搜索关键字
      idx: 0,
	  tableLoading: false,
	  keyboardHeight: 0,
	  pickerValue: []
    };
  },
  computed: {
    // 根据搜索关键字过滤选项
    filteredItems() {
      if (!this.items) return [];
      return this.items.filter((item) =>
        item.text.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
  },
  methods: {
	onFocus(e) {
		if (this.mobile == 1) {
			this.keyboardHeight = e.detail.height || 0
		}
	},
    // 显示选择器
    showPicker(val) {
      this.visible = true;
	  setTimeout(()=>{
		  if(val){
			  let index = this.items.map(item=>item.value).indexOf(val.toString())
			  let value = index != -1 ? index : 0
			  this.pickerValue = [value]
		  }
	  },500)
    },
    // 隐藏选择器
    hidePicker() {
      this.visible = false;
      this.searchQuery = "";
    },
    // 选择项目并触发事件
    selectItem() {
		if (this.type == 3) {
			this.$emit("select", {text: this.searchQuery});
		} else {
			let item = this.items.filter((item) =>
			  item?.text?.toLowerCase().includes(this.searchQuery.toLowerCase())
			)[this.idx];
			this.$emit("select", item);
		}
      this.idx = 0;
      this.hidePicker();
    },
    bindChange(e) {
      this.idx = e.detail.value;
    },
    searchChange() {
      if (this.type == 1){
		  this.$emit("searchChange", this.searchQuery)
	  }
    }
  }
}
</script>

<style lang="scss" scoped>
.picker-btn{
	display: flex;
	align-items: center;
	font-size: 30rpx;
	.btn{
		width: 250rpx;height: 80rpx;border-radius: 16rpx;background: #f0f0f0; color: #555;
		display: flex;align-items: center;justify-content: center;
	}
	.on{
		background: #00c75a;color: #fff;margin-left: 34rpx;
	}
}
.picker {
  padding: 40rpx;

  .picker-header {
    .title {
      text-align: center;
	  padding: 0 0 40rpx 0;
    }

    .topsearch {
      display: flex;
      justify-content: space-between;
      align-items: center;
	  box-shadow: initial;

      .info {
        color: #666;
        font-size: 36rpx;
        padding-right: 40rpx;
      }

      .primary {
        color: #1e77ff;
        font-size: 36rpx;
        padding-left: 40rpx;
      }
    }
  }

  .picker-view {
    width: 100%;
    height: 400rpx;
	.item{
		line-height: 34px;
	}
    ::v-deep .uni-picker-view-content {
      text-align: center;
      line-height: 34px;
    }
  }
}
.search-input{
	flex: 1;
	padding: 14rpx 20rpx;
	border-radius: 4px;
	border: 1px solid #ddd;
}
</style>
